<extend name="Public/common"/>
<block name="othercss">
    <script src="{$theme_path}/localResizeIMG/lib/mobileFix.mini.js?v=ad62f13"></script>
    <script src="{$theme_path}/localResizeIMG/lib/exif.js?v=dd609b9"></script>
    <script src="{$theme_path}/localResizeIMG/lrz.js?v=3d33fcf"></script>
    <style>
        .line_1 {
            width: 100%;
            height: 200px;
        }
        .line_2 {
            width: 100%;
            height: 30px;
        }
        .line_3 {
            padding-left: 6px;
            padding-right: 6px;
            width: 100%;
            height: 150px;
        }
        .line_4 {
            width: 100%;
            height: 50px;
            text-align: center
        }
        .textareas {
            padding-top: 10px;
            padding-left: 6px;
            padding-right: 6px;
            width: 98%;
            height: 200px;
            border: none;
            font-size: 15px;
            color: grey;
        }
        button {
            background-color: red;
            width: 80%;
            height: 35px;
            border-radius: 6px;
            color: white;
            font-size: 16px;
        }
        .spans {
            padding-left: 6px;
            padding-right: 6px;
            font-size: 15px;
            color: grey;
        }
        .img {
            padding: 20px;
            border: grey 0.5px solid;
            height: 45px;
            width: 45px;
            color: grey;
            text-align: center;
            float: left;
        }
        textarea::-webkit-input-placeholder {
            font-size: 15px;
        }
        textarea::-moz-placeholder {
            font-size: 15px;
        }
        textarea::-moz-placeholder {
            font-size: 15px;
        }
        textarea::-ms-input-placeholder {
            font-size: 15px;
        }
    </style>
</block>
<block name="header">
    <div class="header">
        <div class="clearfix box">
            <a class="return" href="javascript:history.back(-1)"><i class="return-icon"></i></a>
            <h2>意见反馈</h2>
        </div>
    </div>
</block>
<block name="body">
    <div class="container pt50">
        <form action="{:urlrotue('Member/feedback')}" method="post">
            <input type="hidden" name="img_data" value="" id="img_data">
            <div class="line_1">
                <textarea class="textareas" name="content" placeholder="感觉你使用百宝库, 使用过程中有任何意见或建议请反馈给我们" required></textarea>
            </div>
            <div class="line_2">
            <span class="spans" style="font-family: '宋体', Tahoma, Arial">
                上传凭证 (最多1张)
            </span>
            </div>
            <div class="line_3">
                <div class="img" onclick="uploadphoto.click()">
                    <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />
                    <img src="/Public/phone/images/camera.png" style="height: 35px; width: 40px;">
                    <span style="font-size: 13px">照片</span>
                </div>
                <div>
                    <img src="" style="padding-left: 10px; width: 85px;height: 85px;" id="img" hidden>
                </div>
            </div>
            <div class="line_4">
                <button type="submit">提交</button>
            </div>
        </form>
    </div>
</block>
<block name="footer"></block>
<block name="otherjs">
    <script type="text/javascript">
        //var pic_index = $("#pic_index").val();
        $(document).ready(function (e) {
            //单图上传
            // var pic_index = $("#pic_index").val();

            var uploadphoto = document.getElementById('uploadphoto');

            uploadphoto.onchange = function () {
                lrz(this.files[0], {width: 350,height:350}, function (results) {
                    // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
                    //console.log(results);
                    // 发送到后端
                    var xhr = new XMLHttpRequest();
                    var data = {
                        base64: results.base64,
                        size: results.base64.length // 校验用，防止未完整接收
                    };
                    xhr.open('POST', "{:urlrotue('Member/feedback_upload')}");

                    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            var result = JSON.parse(xhr.response);
                            // console.log(result);
                            if (result.error == 2) {
                                alert('你的图片格式为' + result.msg + ',只支持JPG\GIF\PNG图片！');
                                // $("#pic" + pic_index2).remove();
                            } else if (result.error == 1) {
                                alert('图片上传出错，请拍照或重试'+result.msg);
                                // $("#pic" + pic_index2).remove();
                            } else {
                                $('#img').removeAttrs('hidden');
                                $("#img").attr('src', '__ROOT__' + result.src+'?v='+ (new Date()).getTime());
                                $('#img_data').val(result.src);
                                //alert(result.src);
                                // $("#headpic").val(result.src2);
                                //console.log(detail_pic + result.src + ",");
                            }
                        }
                    };
                    xhr.send(JSON.stringify(data)); // 发送base64
                });
            };
        });
    </script>

</block>